<!-- table 列表中从中的 操作按钮-->
<template>
  <div>
    <el-dropdown size="mini">
      <el-button size="mini" type="primary" plain>
        操作<i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <div>
          <slot name="top" />
        </div>
        <div v-if="permission && permission.has('info') && !hiddenInfo">
          <el-button :loading="crud.status.cu === 2" :disabled="disabledInfo" size="mini" type="info" style="width: 80px" @click="crud.toInfo(data)"> 详情 </el-button>
        </div>
        <div>
          <slot name="afterInfo" />
        </div>
        <div v-if="permission && permission.has('edit') && !hiddenEdit">
          <el-button :loading="crud.status.cu === 2" :disabled="disabledEdit" size="mini" type="primary" style="width: 80px" @click="crud.toEdit(data)"> 编辑 </el-button>
        </div>
        <div>
          <slot name="afterEdit" />
        </div>
        <div v-if="permission && permission.has('del') && !hiddenDel">
          <el-popover v-model="pop" :disabled="disabledDle" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
            <p>{{ msg }}</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="doCancel">取消</el-button>
              <el-button :loading="crud.dataStatus[crud.getDataId(data)] && crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
            </div>
            <el-button slot="reference" :disabled="disabledDle" type="danger" size="mini" style="width: 80px" @click="toDelete">删除</el-button>
          </el-popover>
        </div>
        <div>
          <slot name="bottom" />
        </div>
      </el-dropdown-menu>
    </el-dropdown>
    <!--
    <el-button v-if="permission.has('edit')" :loading="crud.status.cu === 2" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
    <el-popover v-model="pop" v-if="permission.has('del')"  placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
      <p>{{ msg }}</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="doCancel">取消</el-button>
        <el-button :loading="crud.dataStatus[crud.getDataId(data)] && crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
      </div>
      <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
    </el-popover>
    -->
  </div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
  mixins: [crud()],
  props: {
    data: {
      type: Object,
      required: true
    },
    permission: {
      type: Map,
      default: () => { return new Map() }
    },
    disabledInfo: {
      type: Boolean,
      default: false
    },
    hiddenInfo: {
      type: Boolean,
      default: false
    },
    disabledEdit: {
      type: Boolean,
      default: false
    },
    hiddenEdit: {
      type: Boolean,
      default: false
    },
    disabledDle: {
      type: Boolean,
      default: false
    },
    hiddenDel: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: '确定删除本条数据吗？'
    }
  },
  data() {
    return {
      pop: false
    }
  },
  methods: {
    doCancel() {
      this.pop = false
      this.crud.cancelDelete(this.data)
    },
    toDelete() {
      this.pop = true
    },
    [CRUD.HOOK.afterDelete](crud, data) {
      if (data === this.data) {
        this.pop = false
      }
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    }
  }
}
</script>
